<template>
  <div class="footer">
    <div class="footer-button" @click="activeClick('asset')">
      <van-icon :name="isActive('asset') ? 'card' : 'idcard'" :color="isActive('asset') ? '#409EFF' : '#606266'" size="8vw"/>
      <span>资产</span>
    </div>
    <div class="footer-button" @click="activeClick('forms')"> 
      <van-icon :name="isActive('forms') ? 'balance-list' : 'balance-list-o'" :color="isActive('forms') ? '#409EFF' : '#606266'" size="8vw"/>
      <span>报表</span>
    </div>
    <div v-if="!isActive('bill')" class="footer-button" @click="activeClick('bill')">
      <van-icon  name="aim" color="#606266" size="8vw"/>
      <span>账单</span>
    </div>
    <div v-if="isActive('bill')" class="footer-button" @click="addBill()">
        <van-icon name="add-o" color="#409EFF" size="14vw" />
    </div>
    <div class="footer-button" @click="activeClick('financing')"> 
      <van-icon name="gold-coin-o" :color="isActive('financing') ? '#409EFF' : '#606266'" size="8vw"/>
      <span>理财</span>
    </div>
    <div class="footer-button" @click="activeClick('more')">
      <van-icon  :name="isActive('more') ? 'more' : 'more-o'"  :color="isActive('more') ? '#409EFF' : '#606266'" size="8vw"/>
      <span>更多</span>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { BillModule } from '../../store/modules/bill';
import { Toast } from 'vant';
import { UserModule } from '../../store/modules/user';

@Component({
  name: 'Footer',
})
export default class extends Vue {
  private active: string = 'bill';
  private activeName = {
    ASSET: 'asset',
    FORMS: 'forms',
    BILL: 'bill',
    FINANCING: 'financing',
    MORE: 'more',
  };

  private mounted() {
    this.active = UserModule.currentActive;
  }

  private get isActive() {
    return (active: string) => {
      return this.active === active;
    };
  }

  private activeClick(active: string) {
    if (active === this.active) {
      return ;
    }
    switch (active) {
      case this.activeName.ASSET:
      case this.activeName.BILL:
      case this.activeName.FORMS:
      case this.activeName.MORE:
        this.active = active;
        const router = '$router';
        this[router].push({ path: active });
        UserModule.toggleCurrentActive(active);
        break;
      default:
        Toast.fail({
          message: '暂不支持',
          forbidClick: true,
          duration: 500,
        });
        break;
    }
  }
  private addBill() {
    BillModule.toggleIsAddBillStatus(true);
    const router = '$router';
    this[router].push({ path: 'bill-edit' });
  }
}
</script>

<style scoped>
.footer {
  display: flex;
  height: 100%;
  background-color: #F7F7F7;
}
.footer-button {
  display: flex;
  flex: 1 1 20%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
}
.footer-button span {
  font-size: 24px;
  font-weight: bold;
}
</style>